<template>
  <div>
    <div class="recommendMusic" v-if="dailySongs.length">
      <!-- 每日推荐歌曲信息 -->
      <div class="recommendInfo">
        <div class="title">
          <div class="cover-img">
            <img src="../../assets/recommendMusic.dadb06d2.png" alt="" />
          </div>
          <div class="right-title">
            <h2>每日歌曲推荐</h2>
            <p>根据你的音乐口味生成，每天6:00更新</p>
          </div>
        </div>
        <div class="buttons">
          <div class="buttonItem playAll">
            <i class="iconfont icon-bofang playAll"></i>
            <span>播放全部</span>
          </div>
          <div class="buttonItem">
            <i class="iconfont icon-aixin"></i>
            <span>收藏全部</span>
          </div>
        </div>
      </div>
      <!-- 歌曲列表 -->
      <div class="recommendSongList">
        <el-table
          :data="dailySongs"
          style="width: 100%"
          stripe
          @row-dblclick="clickRow"
        >
          <el-table-column type="index" width="40"> </el-table-column>
          <el-table-column prop="name" label="音乐标题"> </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手"> </el-table-column>
          <el-table-column prop="al.name" label="专辑"> </el-table-column>
          <el-table-column prop="dt" label="时长"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else class="alternate">暂无歌曲推荐</div>
  </div>
</template>

<script>
import { handleMusicTime } from "@/filters/index.js";
export default {
  name: "RecommendMusic",

  data() {
    return {
      dailySongs: [],
      //   每日推荐id （自己起的，用于上传vuex当musicListId，只是作为一个唯一标识）
      recommendMusicListId: "recommendMusic",
    };
  },

  mounted() {
    this.getRecommendSongs();
    if (!this.$store.state.isLogin) {
      this.$message.error("只有登录后才能访问每日推荐哦!");
      this.$router.replace("/home");
    }
  },

  methods: {
    // 获取每日推荐歌曲
    async getRecommendSongs() {
      const { data: res } = await this.$http("/recommend/songs");
      console.log(res);
      this.dailySongs = res.data.dailySongs;
      //   处理歌曲时间
      this.dailySongs.forEach((item, index) => {
        this.dailySongs[index].dt = handleMusicTime(item.dt);
      });
    },
    // 双击table的row的回调
    // 播放音乐的逻辑操作
    async clickRow(row) {
      console.log(row);
      // 将musicId提交到vuex中 供bottomControl查询歌曲url和其它操作
      this.$store.commit("updateMusicId", row.id);
      // 如果歌单发生变化,则提交歌单到vuex
      if (this.recommendMusicListId != this.$store.state.musicListId) {
        // 将歌单传到vuex
        this.$store.commit("updateMusicList", {
          musicList: this.dailySongs,
          musicListId: this.recommendMusicListId,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.recommendInfo {
  width: 90%;
  margin: 30px auto;
  height: 200px;
  .title {
    display: flex;
    align-items: center;
    .cover-img {
      img {
        width: 120px;
        height: 100px;
      }
    }
    .right-title {
      margin-left: 10px;
      p {
        color: #666666;
        margin-top: 10px;
      }
    }
  }
  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 21%;
    margin-top: 20px;
    .buttonItem {
      font-size: 14px;
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      color: #666666;
      i {
        margin-right: 5px;
      }
      cursor: pointer;
    }
    .playAll {
      background-color: #ec4141;
      color: #fff;
    }
  }
}
.recommendSongList {
  width: 95%;
  margin: 10px auto;
}
.alternate {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  width: 100%;
  font-weight: 600;
  font-size: 25px;
}
</style>